<template>
    <div style="border: 2px solid;">
        <h1><span style="color:red" v-for="p in personList" :key="p.id">{{ p.name }} &nbsp;</span>在{{ school }} 学习，{{
            subject }}</h1>
        <h2 style="color:red">Person组件当前人数：{{ personList.length }}</h2>
        <div style="border: 2px solid;">
            <span>小工具，与上面无关</span>
            <h3>当前和：{{ sum }}</h3> 模板里面可以省略this，因为它可以看到 vc身上的所有东西<br>
            <h2>放大10倍：{{ bigSum }}</h2>
            <select v-model.number="n">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <button @click="increament(n)">+</button>
            <button @click="decreament(n)">-</button>
            <button @click="increamentOdd(n)">当前和 是奇数才能加</button>
            <button @click="increamentWait(n)">延迟500毫秒地加</button>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { mapState, mapGetters } from 'vuex';
import { mapActions, mapMutations } from 'vuex';
export default Vue.extend({
    name: 'Count',
    data() {
        return {
            n: 1,
        }
    },
    methods: {
        ...mapMutations('count', { 'increament': 'JIA', 'decreament': 'JIAN' }),
        ...mapActions('count', { 'increamentOdd': 'jiaOdd', 'increamentWait': 'jiaWait' }),
    },
    computed: {
        ...mapState('count', { 'sum': 'sum', 'school': 'school', 'subject': 'subject' }),
        ...mapState('person', { 'personList': 'personList' }),
        ...mapGetters('count', { 'bigSum': 'bigSum' }),
    },
    mounted() {
        console.log("Count", this);
    }
}) 
</script>

<style>
button {
    margin: 3px;
}
</style>